<template>
<div>
    <div class="GuanZhu" >
        <span style="display: block"><van-icon name="setting-o" size="25" @click="ToSetting" /></span>
    </div>
    <div style="margin-top: -5%;margin-left: 20px">
        <van-image
                round
                width="60"
                height="60"
                :src=this.personL[0].avatar
        />
        <div style="margin-top: -17%;margin-left: 70px;position: relative">
            <span style="font-weight: 600;font-size: 20px;">{{personL[0].username}}</span><br>
            <span style="color: red;position: absolute;top: 30px;font-size: 30px">********</span>
        </div>
        <div style="margin-top: 15%;display: flex;">

            <span >
                 <router-link to="/collectList">
                <li style="font-weight: 600">&nbsp;&nbsp;{{personL[1]}}</li>
                <li style="font-weight: 400">收藏</li>
                 </router-link>
            </span>

            <span>
                 <router-link to="/SubscribeList">
                    <li style="font-weight: 600">&nbsp;&nbsp;{{subscribeNumber}}</li>
                    <li style="font-weight: 400">关注</li>
                </router-link>
            </span>
            <span>

                <router-link to="/FansList">
                    <li style="font-weight: 600">{{fansNumber}}</li>
                    <li style="font-weight: 400">粉丝</li>
                </router-link>

            </span>
            <span>
                 <router-link to="/message">
                <li style="font-weight: 600">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{MessageNum}}</li>
                <li style="font-weight: 400">留言与回复</li>
                 </router-link>
            </span>
        </div>
        <div style="height: 10px"></div>
    </div>
    <div style="width: 100%;height: 1px;background-color:#F2F2F2"></div>
    <div>
        <h4 style="margin-left: 10px;margin-top: 3%">我的交易</h4>
        <div style="margin-top: 5%;display: flex;margin-left: 20px">
            <span >
                <li >&nbsp;&nbsp;&nbsp;&nbsp;
                         <van-image
                                 round
                                 width="35"
                                 height="35"
                                 src="https://img01.yzcdn.cn/vant/cat.jpeg"
                         />
                </li>
              <router-link to="/fblist">
                <li style="font-weight: 400; font-size: 15px">我的发布10</li>
              </router-link>

            </span>
            <span >
                <li >&nbsp;&nbsp;&nbsp;&nbsp;
                         <van-image
                             round
                             width="35"
                             height="35"
                             src="https://img01.yzcdn.cn/vant/cat.jpeg"
                         />
                </li>
              <router-link to="/KeepList">
                <li style="font-weight: 400; font-size: 15px">我的保存10</li>
              </router-link>

            </span>
            <span>
                <li >&nbsp;&nbsp;&nbsp;&nbsp;
                    <van-image
                        round
                        width="35"
                        height="35"
                        src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                </li>
                <li style="font-weight: 400;font-size: 15px">我卖出的10</li>
            </span>
            <span>
             <router-link to="/orderList">   <li >&nbsp;&nbsp;&nbsp;&nbsp;
                      <van-image
                              round
                              width="35"
                              height="35"
                              src="https://img01.yzcdn.cn/vant/cat.jpeg"
                      />
                </li>
                <li style="font-weight: 400;font-size: 15px">我买到的10</li></router-link>
            </span>
        </div>
    </div>
    <!--        底部-->
    <buttom/>
    <div style="height: 500px"></div>
    <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
    >
    </van-list>

    <!--      用来展示没有更多-->
    <div style="height: 50px"></div>
</div>
</template>
<script>
import buttom from "@/components/book/buttom";
    export default {
        name: "person",
      components:{
          buttom
      },
        data(){
            return{
                //留言与回复总数
                MessageNum:'',
                //收藏的条数/和用户信息
                personL:[],
                loading: false,
                finished: false,
                //点单的条数
                orderNum:'',
              //关注数
              subscribeNumber: 0,
              //粉丝数
              fansNumber: 0,
              user:this.$store.state.userinfo.user?this.$store.state.userinfo.user.user.username:""


            }
        },
        methods:{
            ToSetting(){
                //跳转到设置页面
                this.$router.push("setting?user_id="+this.$store.state.userinfo.user.user.id);
            },
            onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    // 加载状态结束
                    this.loading = false;
                    // 数据全部加载完成
                    this.finished = true;

                }, 100);
            },
            //查询收藏的数据条数
            countColBook(){
                var uId= this.$store.state.userinfo.user.user.id;
                this.axios({
                    method:"get",
                    url:"/collect/countCollect/"+uId
                }).then(resp =>{
                   this.personL=resp.data.data.personList
                })
            },
            //获取点单的条数
            countOrder(){
                this.axios({
                    method:"post",
                    url:"/order/countOrder"
                }).then(resp=>{
                    this.orderNum=resp.data.data.orderN
                })
            },
          //获取收到的留言与回复总数
          countMessage(){
              var _this = this
              var username = _this.$store.state.userinfo.user.user.username
              this.axios({
                method:"get",
                url:"/message/countMessage/"+username,
              }).then(function (rep){
                _this.MessageNum = rep.data.data.count;
              })
          },
          //查询关注数
          subscribeNum(){
            var _this = this;
            _this.axios({
              method: "get",
              url: "/subscribeNum?username="+_this.user,
            }).then(resp=>{
              _this.subscribeNumber = resp.data.data.subscribeNum;
              console.log('subscribeNumber: '+_this.subscribeNumber);
            })
          },
          //查询粉丝数
          fansNum(){
            var _this = this;
            _this.axios({
              method: "get",
              url: "/fansNum?username="+_this.user,
            }).then(resp=>{
              _this.fansNumber = resp.data.data.fansNum;
            })
          }


        },
        mounted() {
            var _this=this;
            //查询收藏的数据条数
            _this.countColBook();
            //获取订单的条数
            _this.countOrder();

            _this.countMessage();
          _this.subscribeNum();
          _this.fansNum();

        }
    }
</script>

<style lang="css">
    .GuanZhu{
        margin-left: 300px;
        margin-top: -10%;
        border-radius: 15%;
        line-height: 26px;
        text-align: center;
        position: relative;
    }
    span{
        list-style: none;
        flex: 1;
    }
</style>